<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="top-section">
			<!-- 个人信息 -->
			<view class="user-info">
				<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
				<view class="user-name">
					{{ userName }}
					<text class="member-type">普通会员</text>
					<text class="check-rights" @click="checkRights">查看权益</text>
				</view>
			</view>
			<!-- 			进度条
			<view class="progress-section">
				<uni-progress :percent="progress" show-info stroke-width="4"></uni-progress>
				<text class="progress-text">({
					{ currentPoints }/{
					{ totalPoints }})</text>
			</view> -->
			<!-- 通知图标 -->
			<view class="notification-icon">
				<uni-icons type="notification-filled" size="24" color="#fff"></uni-icons>
				<text class="notification-badge">{{ notificationCount }}</text>
			</view>
			<!-- 四个功能图标 -->
			<view class="function-icons">
				<view class="icon-item" v-for="(icon, index) in functionIcons" :key="index"
					@click="handleIconClick(icon)">
					<uni-icons :type="icon.type" size="32" color="#fff"></uni-icons>
					<text class="icon-text">{{ icon.text }}</text>
				</view>
			</view>
		</view>

		<!-- 我的订单模块 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<text class="view-all-orders" @click="viewAllOrders">查看全部订单 ></text>
			</view>
			<view class="order-icons">
				<view class="order-icon-item" v-for="(orderIcon, index) in orderIcons" :key="index">
					<uni-icons :type="orderIcon.type" size="32" color="#ff6600"></uni-icons>
					<text class="order-icon-text">{{ orderIcon.text }}</text>
				</view>
			</view>
		</view>

		<!-- 增值服务模块 -->
		<view class="vip-section">
			<view class="section-header">
				<text class="section-title">增值服务</text>
			</view>
			<view class="vip-icons">
				<view class="vip-icon-item" v-for="(vipIcon, index) in vipIcons" :key="index">
					<uni-icons :type="vipIcon.type" size="32" color="#ff6600"></uni-icons>
					<text class="vip-icon-text">{{ vipIcon.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const avatarUrl = ref('/static/image/3.jpg'); // 替换为实际头像地址
	const userName = ref('冯先生');
	const progress = ref(33); // 进度条百分比
	// const currentPoints = ref(500);
	// const totalPoints = ref(1500);
	const notificationCount = ref(6);

	// 顶部功能图标
	const functionIcons = ref([{
			type: 'calendar',
			text: '每日签到'
		},
		{
			type: 'pyq',
			text: '每日抽奖'
		},
		{
			type: 'shop',
			text: '积分商城'
		},
		{
			type: 'medal',
			text: '优惠券'
		}
	]);

	// 我的订单图标
	const orderIcons = ref([{
			type: 'wallet-filled',
			text: '待付款'
		},
		{
			type: 'gift-filled',
			text: '待发货'
		},
		{
			type: 'folder-add-filled',
			text: '待收货'
		},
		{
			type: 'chat-filled',
			text: '评价'
		},
		{
			type: 'phone-filled',
			text: '退款/售后'
		}
	]);

	// 增值服务图标
	const vipIcons = ref([{
			type: 'shop-filled',
			text: '商家工作台'
		},
		{
			type: 'person-filled',
			text: '个人信息'
		},
		{
			type: 'help-filled',
			text: '常见问题'
		},
		{
			type: 'contact-filled',
			text: '在线客服'
		}
	]);

	// 处理图标点击
	const handleIconClick = (icon) => {
		console.log(`点击了 ${icon.text}`);
	};

	// 查看全部订单
	const viewAllOrders = () => {
		console.log('查看全部订单');
	};

	// 查看权益
	const checkRights = () => {
		console.log('查看权益');
	};
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.top-section {
		background-color: #ff6600;
		padding: 20px;
		color: #fff;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 16px;
	}

	.member-type {
		font-size: 12px;
		background-color: #fff;
		color: #ff6600;
		padding: 2px 6px;
		border-radius: 2px;
		margin-left: 5px;
	}

	.check-rights {
		font-size: 12px;
		color: #fff;
		margin-left: 10px;
	}

	// .progress-section {
	// 	margin-bottom: 10px;
	// }

	// .progress-text {
	// 	font-size: 12px;
	// 	text-align: right;
	// }

	.notification-icon {
		position: absolute;
		top: 10px;
		right: 20px;
	}

	.notification-badge {
		position: absolute;
		top: -2px;
		right: -2px;
		background-color: #ff0000;
		color: #fff;
		font-size: 10px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.function-icons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.icon-text {
		font-size: 12px;
		margin-top: 5px;
	}

	.order-section,
	.vip-section {
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		border-radius: 8px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.section-title {
		font-size: 18px;
	}

	.view-all-orders {
		font-size: 14px;
		color: #666;
	}

	.order-icons,
	.vip-icons {
		display: flex;
		justify-content: space-between;
	}

	.order-icon-item,
	.vip-icon-item {
		display: flex;
		flex-direction: column;
		text-align: center;
		text-align: center;
	}

	.order-icon-text,
	.vip-icon-text {
		font-size: 14px;
		margin-top: 5px;
	}
</style>